#{extends 'simpleTemplate.html'/}
<title>&{'Taskboard_header'}</title>

<link href="@{'/public/css/taskboard.css'}" rel="stylesheet">

<script type="text/javascript" src="@{'/public/js/json2.js'}"></script>
<script>
    function beautify(id) {
        var prefix = "";
        if (id) {
            prefix = "#" + id + " ";
        }

        $(prefix + ".tb-task").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
                .find(".tb-task-header")
                .addClass("ui-corner-all")
                .prepend("<span class='ui-icon ui-icon-minusthick'></span>")
                .end()
                .find(".tb-task-content");

        $(prefix + ".tb-task-header .ui-icon").click(function () {
            $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
            $(this).parents(".tb-task:first").find(".tb-task-content").toggle();
        });

        $(prefix + ".card-edit").click(function () {
            var id = $(this).parent().parent().attr('id');
            var title = $("#" + id + " .tb-card-title").html();
            var newTitle = prompt("&{'Taskboard_new_title'} '" + id + "':", title);
            if (!newTitle) {
                return false;
            }
            var content = $("#" + id + " .tb-task-content").html();
            var newContent = prompt("&{'Taskboard_new_content'} '" + id + "':", content);
            if (!newContent) {
                return false;
            }

            var value = {
                "action": "card:update",
                "id": id.substring("card-".length)
            };
            if (newTitle != title) {
                value.title = newTitle;
            }
            if (newContent != content) {
                value.content = newContent;
            }
            var data = JSON.stringify(value);
            c2s.send(data);

            return false;
        });

        $(prefix + ".card-remove").click(function () {
            var id = $(this).parent().parent().attr('id');
            if (confirm("&{'Taskboard_card_remove'} '" + id + "'?")) {
                var value = {
                    "action": "card:remove",
                    "id": id.substring("card-".length)
                };
                var data = JSON.stringify(value);
                c2s.send(data);
            }
            return false;
        });
    }
    $(function () {
        // map column-name ->
        var state = {
        };

        $("#taskboard").addClass("active");

        var columns = $(".tb-column");

        // calc initial state
        columns.find(".tb-task").each(function (idx, val) {
            var $val = $(val);
            var task_id = $val.attr('id');
            var column_id = $val.parent().attr('id');
            if (task_id && column_id && task_id != '' && column_id != '') {
                state[task_id] = column_id;
            }
        });

        columns.sortable({
            items: "div.tb-task",
            connectWith: ".tb-column",
            stop: function (event, ui) {
                var $item = $(ui.item);
                var id = $item.attr('id');
                var prev = state[id];
                var curr = $item.parent().attr('id');
                if (curr != prev) {
                    state[id] = curr;

                    var value = {
                        "action": "card:move",
                        "id": id.substring("card-".length),
                        "column": curr.substring("column-".length)
                    };
                    var data = JSON.stringify(value);
                    c2s.send(data);
                }
            },
            start: function (event, ui) {
                ui.item.addClass('on-drag');
            },
            beforeStop: function (event, ui) {
                ui.item.removeClass('on-drag');
            }
        });

        columns.disableSelection();

        $(".tb-add-item").click(function () {
            var column = $(this).parent().attr('id').substring("column-".length);
            var title = prompt("&{'Taskboard_new_card_title'} '" + column + "':");
            var content = prompt("&{'Taskboard_new_card_content'} '" + column + "':");

            var value = {
                "action": "card:add",
                "title": title,
                "content": content,
                "column": column
            };
            var data = JSON.stringify(value);
            c2s.send(data);
        });

        s2c.onmessage = function (event) {
            var msg = $.parseJSON(event.data);
            if ("card:add" == msg.action) {
                $('<div class="tb-task" id="card-' + msg.id + '">' +
                        '<div class="tb-task-header">' +
                        '<span class="tb-card-title">' + msg.title + '</span> ' +
                        '[<a class="card-edit">&{'Taskboard_edit_card'}</a>' +
                        '|<a class="card-remove">&{'Taskboard_remove_card'}</a>]</div>' +
                        '<div class="tb-task-content">' + msg.content + '</div>' +
                        '</div>'
                ).insertAfter("#column-" + msg.column + " .tb-column-header");
                beautify("card-" + msg.id)
            } else if ("card:remove" == msg.action) {
                $("#card-" + msg.id).remove();
            } else if ("card:move" == msg.action) {
                $("#card-" + msg.id).insertAfter("#column-" + msg.column + " .tb-column-header")
            } else if ("card:update" == msg.action) {
                var id = msg.id;
                if (msg.content) {
                    $("#card-" + id + " .tb-task-content").html(msg.content);
                }
                if (msg.title) {
                    $("#card-" + id + " .tb-card-title").html(msg.title);
                }
            }
        };

    });

    var c2s = new WebSocket("@@{taskboard.TaskBoardWS.clientToServer()}");
    var s2c = new WebSocket("@@{taskboard.TaskBoardWS.serverToClient()}");

</script>

<div class="content">
    <div class="content-header">
        <h2>&{'Taskboard'}</h2>
    </div>
    <div class="content-body">

        <div class="tb-column" id="column-&{'Taskboard_to_do'}">

            <div class="tb-column-header">
                &{'Taskboard_to_do'}
            </div>

            <div class="tb-task" style="display: none">
            </div>

            <div class="tb-add-item">
                &{'Taskboard_add_item'}
            </div>

        </div>

        <div class="tb-column" id="column-&{'Taskboard_in_progress'}">

            <div class="tb-column-header">
                &{'Taskboard_in_progress'}
            </div>

            <div class="tb-task" style="display: none">
            </div>

            <div class="tb-add-item">
                &{'Taskboard_add_item'}
            </div>

        </div>

        <div class="tb-column" id="column-&{'Taskboard_done'}">

            <div class="tb-column-header">
                &{'Taskboard_done'}
            </div>

            <div class="tb-task" style="display: none">
            </div>

            <div class="tb-add-item">
                &{'Taskboard_add_item'}
            </div>

        </div>

    </div>
</div>


